---
title: Files
description: A component that allows you to display a list of files and folders.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-radix-files" />

## Installation

<ComponentInstallation name="components-radix-files" />

## Usage

```tsx
<Files>
  <FolderItem value="app">
    <FolderTrigger>app</FolderTrigger>

    <FolderContent>
      <SubFiles>
        <FolderItem value="(home)">
          <FolderTrigger>(home)</FolderTrigger>

          <FolderContent>
            <FileItem>page.tsx</FileItem>
            <FileItem>layout.tsx</FileItem>
          </FolderContent>
        </FolderItem>

        <FileItem>layout.tsx</FileItem>
        <FileItem>page.tsx</FileItem>
        <FileItem>global.css</FileItem>
      </SubFiles>
    </FolderContent>
  </FolderItem>

  <FolderItem value="components">
    <FolderTrigger>components</FolderTrigger>

    <FolderContent>
      <SubFiles>
        <FileItem>button.tsx</FileItem>
        <FileItem>tabs.tsx</FileItem>
        <FileItem>dialog.tsx</FileItem>

        <FolderItem value="empty">
          <FolderTrigger>empty</FolderTrigger>
        </FolderItem>
      </SubFiles>
    </FolderContent>
  </FolderItem>

  <FileItem>package.json</FileItem>
</Files>
```

## API Reference

### Files

<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/accordion#accordion"
  text="Animate UI API Reference - Radix UI Accordion"
/>

<TypeTable
  type={{
    children: {
      description: 'The child folders and files.',
      type: 'React.ReactNode',
      required: true,
    },
    defaultOpen: {
      description: 'The child folders open by default.',
      type: 'string[]',
      required: false,
      default: '[]',
    },
    open: {
      description: 'The child folders open.',
      type: 'string[]',
      required: false,
    },
    onOpenChange: {
      description: 'The callback function when the child folders open changes.',
      type: '(open: string[]) => void',
      required: false,
    },
  }}
/>

### FolderItem

<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/accordion#accordionitem"
  text="Animate UI API Reference - Radix UI AccordionItem"
/>

### FolderTrigger

<TypeTable
  type={{
    gitStatus: {
      description: 'The git status of the folder.',
      type: '"untracked" | "modified" | "deleted"',
      required: false,
    },
    '...props': {
      description: 'The props of the folder trigger.',
      type: 'React.ComponentProps<"span">',
      required: false,
    },
  }}
/>

### FolderContent

<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/accordion#accordioncontent"
  text="Animate UI API Reference - Radix UI AccordionContent"
/>

### FileItem

<TypeTable
  type={{
    icon: {
      description: 'The icon of the file.',
      type: 'React.ElementType',
      required: false,
      default: 'FileIcon',
    },
    gitStatus: {
      description: 'The git status of the file.',
      type: '"untracked" | "modified" | "deleted"',
      required: false,
    },
    '...props': {
      description: 'The props of the file item.',
      type: 'React.ComponentProps<"span">',
      required: false,
    },
  }}
/>

## Credits

- [Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion)
